<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<ui:composition
	template="/WEB-INF/facelets/templates/templateGrupo.xhtml">
	<ui:define name="content">
		<h3 style="color: #FF9900">ESTAR EN LA ONDA DE ONDAS</h3>
		<br />
		<h:form>
			<h:panelGrid columns="3">
				<h:outputText value="Titulo:" style="color:#0066CC"></h:outputText>
				<h:inputText value="#{grupoBean.informeFinal.titulo}"></h:inputText>
				<h:commandLink value="Ayuda" id="titulo" />

				<h:outputText value="Perturbacion de la onda:" style="color:#0066CC"></h:outputText>
				<h:inputTextarea value="#{grupoBean.informeFinal.perturbacion}"
					style="width: 360px; height: 200px; " id="pert"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="perturbacion" />
				<h:outputText value="" />
				<rich:message for="pert" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />


				<h:outputText value="Superposición de la onda:"
					style="color:#0066CC"></h:outputText>
				<h:inputTextarea value="#{grupoBean.informeFinal.superposicion}"
					style="width: 360px; height: 200px; " id="super"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="superposicion" />
				<h:outputText value="" />
				<rich:message for="super" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />


				<h:outputText value="Objetivo general:" style="color:#0066CC"></h:outputText>
				<h:inputTextarea value="#{grupoBean.informeFinal.objetivoGeneral}"
					style="width: 360px; height: 200px; " id="obGe"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="objetivoGeneral" />
				<h:outputText value="" />
				<rich:message for="obGe" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />


				<h:outputText value="Objetivos especificos:" style="color:#0066CC"></h:outputText>
				<h:inputTextarea
					value="#{grupoBean.informeFinal.objetivoEspecifico}"
					style="width: 360px; height: 200px; " id="obEsp"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="objetivoEspecifico" />
				<h:outputText value="" />
				<rich:message for="obEsp" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />


				<h:outputText value="La reflexión de la onda:" style="color:#0066CC"></h:outputText>
				<h:inputTextarea value="#{grupoBean.informeFinal.reflexionOnda}"
					style="width: 360px; height: 200px; " id="ref"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="reflexion" />
				<h:outputText value="" />
				<rich:message for="ref" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />


				<h:outputText value="Resultados" style="color:#0066CC"></h:outputText>
				<h:inputTextarea value="#{grupoBean.informeFinal.resultados}"
					style="width: 360px; height: 200px; " id="resu"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="resultados" />
				<h:outputText value="" />
				<rich:message for="resu" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />


				<h:outputText value="Impacto:" style="color:#0066CC"></h:outputText>
				<h:inputTextarea value="#{grupoBean.informeFinal.impacto}"
					style="width: 360px; height: 200px; " id="imp"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="impacto" />
				<h:outputText value="" />
				<rich:message for="imp" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />


				<h:outputText value="Conclisiones:" style="color:#0066CC"></h:outputText>
				<h:inputTextarea value="#{grupoBean.informeFinal.conclusiones}"
					style="width: 360px; height: 200px; " id="conc"
					validatorMessage="Error de Validación: Valor es más grande de valor de máximo permitido: '5.100'.">
					<f:validateLength maximum="5100" />
					<rich:ajaxValidator event="onblur" />
				</h:inputTextarea>
				<h:commandLink value="Ayuda" id="conclusiones" />
				<h:outputText value="" />
				<rich:message for="conc" style="color:red;">
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/icons/error.jpg" />
					</f:facet>
				</rich:message>
				<h:outputText value="" />

			</h:panelGrid>

			<a4j:commandButton value="Aceptar"
				action="#{grupoBean.crearInformeFinal}"
				oncomplete="#{rich:component('wait')}.show()" />

			<br />
			<rich:modalPanel id="wait" autosized="true" width="300" height="120"
				moveable="false" style="background-color:white;">
				<f:facet name="header">
					<h:outputText value="Informacion" />
				</f:facet>
				<f:facet name="controls">
					<h:panelGroup>
						<h:graphicImage value="/images/icons/close.jpg" id="hidelink"
							styleClass="hidelink" />
						<rich:componentControl for="wait" attachTo="hidelink"
							operation="hide" event="onclick" />
					</h:panelGroup>
				</f:facet>
				<h:form>
					<h:panelGrid columns="1">
						<a4j:outputPanel ajaxRendered="true">
							<h:panelGroup rendered="#{grupoBean.informeFinalCreado}">
								<h:panelGrid columns="2">
									<h:graphicImage value="/images/icons/ok.jpg" />
									<h:outputText value="Datos almacenados correctamente"
										style="font-style: italic; font-size: 16px" />
								</h:panelGrid>
							</h:panelGroup>
						</a4j:outputPanel>
						<a4j:outputPanel ajaxRendered="true">
							<h:panelGroup rendered="#{!grupoBean.informeFinalCreado}">
								<h:panelGrid columns="2">
									<h:graphicImage value="/images/icons/err.jpg" />
									<h:outputText value="Error almacenando datos"
										style="font-style: italic; font-size: 16px" />
								</h:panelGrid>
							</h:panelGroup>
						</a4j:outputPanel>
					</h:panelGrid>
				</h:form>
			</rich:modalPanel>


			<rich:toolTip for="perturbacion" style="background-color:white;">
				<table border="0" cellpadding="3">
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/xua.jpg" />
						</td>
						<td><h4>Xua:</h4>
						</td>
						<td>Profesor Einstein, ¿puede explicarnos nuevamente qué es
							una perturbación?,para que los niños puedan registrarlas en este
							campo.</td>
					</tr>
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/einstein.jpg" /></td>
						<td><h4>Einstein:</h4>
						</td>
						<td>Cuando uno camina en la noche por un lugar oscuro y
							enciende una lámpara o una linterna, de inmediato ve lo que hay a
							su alrededor: ha producido una onda luminosa que permite ver los
							objetos. El murciélago hace algo similar, emitiendo ondas de
							sonido que se reflejan en los objetos cercanos. ¿Qué creen que
							hay de común en los dos casos?</td>
					</tr>
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/teo.jpg" /></td>
						<td>
							<h4>Teo:</h4>
						</td>
						<td>Por la explicación que nos dio antes, diría que en ambos
							casos se produce una perturbación y una respuesta.</td>
					</tr>
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/einstein.jpg" /></td>
						<td>
							<h4>Einstein:</h4>
						</td>
						<td>Sí, chicos. Así como esas perturbaciones producen la onda
							sonora o luminosa que obliga a los objetos a manifestarse, las
							preguntas generan respuestas; de esas respuestas quedan
							interrogantes que los llevan a hacer nuevas preguntas: son como
							ondas que rebotan o se reflejan.</td>
					</tr>
				</table>
			</rich:toolTip>

			<rich:toolTip for="superposicion" style="background-color:white;">
				<table border="0" cellpadding="3">
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/einstein.jpg" /></td>
						<td><h4>
								<h:outputText>Einstein:</h:outputText>
							</h4></td>
						<td>Te dare un ejemplo de superposicion de la Onda Cuando en
							la noche ves acercarse un vehículo a gran distancia, no puedes
							saber si se trata de un auto o de una moto. A medida que se
							acerca el auto, la imagen de cada foco se for- ma en puntos
							separados de tu retina y logras diferenciarlos. Esas imáge- nes
							nítidas son el resultado de la su- perposición o combinación de
							ondas de luz.</td>
					</tr>
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/teo.jpg" />
						</td>
						<td><h4>Teo:</h4></td>
						<td>¿Recuerdas, Xua, cuando fuimos a mirar las estrellas en
							el telescopio de la universidad? A simple vista, observamos un
							punto brillante que después resultó ser el planeta Júpiter y sus
							lunas.</td>
					</tr>
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/xua.jpg" />
						</td>
						<td>
							<h4>Xua:</h4></td>
						<td>Sí, Teo. Lo mismo ocurrió cuando miramos a través del
							microscopio el grano de polen de una flor: al principio, vimos un
							punto borroso; pero cuando ajustamos las lentes del microscopio,
							descubrimos que el punto se componía de varias partes, claramente
							diferenciadas.</td>
					</tr>
					<tr>
						<td><img width="" height="25%" usemap="#Map"
							alt="Universidad del quindio" src="images/einstein.jpg" /></td>
						<td>
							<h4>Einstein:</h4></td>
						<td>Esas imágenes nítidas son el resultado de la
							superposición o combinación de ondas de luz.</td>
					</tr>
				</table>
			</rich:toolTip>
		</h:form>
	</ui:define>
	<ui:define name="menu">
		<a4j:form>
			<ul class="menu">
				<li class="item174"><a href="grupoIni.jsf"> <span>Atras</span>
				</a></li>
			</ul>
		</a4j:form>
	</ui:define>
</ui:composition>
</html>